<template>
  <header class="page-header" :class="[true ? userLang : '']">
    <div class="logo">
      <nuxt-link to="/"><h1>成都赤月科技有限公司</h1></nuxt-link>
    </div>
    <div class="page-container">
      <div class="page-menu">
        <dl
          v-for="(item, index) in menuData"
          :class="['page-scroll', active === item.lowerCase ? 'active' : '']"
          :key="index"
          @click="scrollTo(item.lowerCase, index)"
        >
          <dt class="cn-title">{{ $t(`home.menu.${item.lowerCase}`) }}</dt>

          <span class="active-dot"></span>
        </dl>
      </div>
    </div>

    <div class="page-lang">
      <span
        :class="[userLang === 'cn' ? 'lang-curr' : '']"
        @click="setLang('cn')"
        >中文</span
      >
      /
      <span
        :class="[userLang === 'en' ? 'lang-curr' : '']"
        @click="setLang('en')"
        >ENGLISH</span
      >
    </div>
  </header>
</template>
<script setup>
import { onMounted, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  menuData: {
    type: Array, //(string也可以是其他你自定义的接口)
    required: true,
    default: () => [],
  },
  vSwiperIndex: {
    type: String,
  },
})

// 切换语言
const { t, locale } = useI18n()

const langages = useCookie('lang')
langages.value = langages.value || 'cn'

const userLang = userLangeages()

const setLang = (lan) => {
  locale.value = lan
  //存储在cookie, 和本地state
  //皮肤的思想是： 现在本地存储查找，
  //如果没有，就去cookie中查找并赋值
  langages.value = lan
  userLang.value = lan
}

//返回上一页
const router = useRouter()
const backPage = () => {
  router.back()
}

//滚动功能
const route = useRoute()
let thisRoute = router.currentRoute.value.name
const active = ref(thisRoute)

//首页滚动的时候， 导航发生变化， 其他页按照路由进行选中
watch(
  () => props.vSwiperIndex,
  (newValue, oldVlaue) => {
    active.value = newValue
  }
)

const emits = defineEmits(['scrollTo'])
const scrollTo = (e, index) => {
  active.value = e
  emits('scrollTo', e, index)
}
</script>
<style lang="scss" scoped>
.page-header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background: #f4f4f4;
  border-bottom: 1px solid #fdfdfd;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  z-index: 9;
  transition: all 0.25s linear;

  &.show {
    animation: slideIn 0.5s linear;
    position: fixed;
    transform: none;
  }
}
.logo {
  width: 133px;
  height: 64px;
  text-indent: -9999em;
  margin: 0 40px;
  background: url(/images/logo.png) no-repeat 50% 50%;
  background-size: 100% 100%;
}
.page-lang {
  margin: 0 40px;
  span {
    &.lang-curr {
      color: #c50918;
    }
    cursor: pointer;
  }
}
.page-back {
  position: absolute;
  right: 30px;
  top: 30px;

  .iconfont {
    font-size: 30px;
  }
}

.page-menu {
  display: flex;
  justify-content: center;
  padding: 16px 0px 0;
  dl {
    cursor: pointer;
  }
}
.page-scroll {
  padding: 0 60px;
  text-align: center;
  color: #000000;
  .cn-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 62px;
  }
  .en-title {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.6px;
  }
  &:hover {
    color: #c50918;
    .active-dot {
      &:after {
        left: 0;
        margin-left: 0;
        width: 100%;
        height: 4px;
        top: 3px;
        border-radius: 2px;
        background: #c50918;
      }
    }
  }
  &.active {
    color: #c50918;
    .active-dot {
      &:after {
        background: #c50918;
      }
    }
  }
  .active-dot {
    position: relative;
    margin: 10px auto 5px;
    display: block;

    height: 9px;
    transition: all ease-in 0.25s;
    &:after {
      position: absolute;
      left: 50%;
      margin-left: -5px;
      top: 0;
      content: '';
      width: 9px;
      height: 9px;
      background: transparent;
      border-radius: 50%;
      transition: all ease-in 0.25s;
    }
  }
}
</style>
